<template>
  <view class="topic-list-page">
    <uni-page-header title="话题广场" />
    <view class="list-wrap">
      <view v-for="(item, index) in listData" :key="index" class="item-card" @click="onViewDetail(item)">
        <u-image :src="item.cover_img_url" radius="10" width="66" height="66" />
        <view class="info-wrap">
          <view class="title">{{ item.name }}</view>
          <view class="answer-count">{{ item.post_num }}回答</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getImg
} from '../utils/index.js'
import {
  wx_talk_subject_list
} from '../api/index.js'
import {
  mapActions
} from 'vuex'
export default {
  name: 'TopicList',
  data() {
    return {
      listData: []
    }
  },
  onLoad() {
    this.getListData()
  },
  methods: {
    ...mapActions(['setTopicDetail']),
    async getListData() {
      const {
        talk_list
      } = await wx_talk_subject_list()
      this.listData = talk_list.map(e => {
        const {
          cover_img
        } = e
        this.$set(e, 'cover_img_url', cover_img ? getImg(cover_img) : '')
        return e
      })
    },
    onViewDetail(data) {
      this.setTopicDetail(data)
      this.$utils.navigateToPage('/pagesTopic/detail')
    }
  }
}
</script>

<style lang="scss" scoped>
	.topic-list-page {
		.list-wrap {
			padding-bottom: 20rpx;

			.item-card {
				width: 95%;
				padding: 26rpx;
				margin: 20rpx auto 0;
				background-color: #FFF;
				@include flex-column-center;
				gap: 28rpx;
				box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.05);
				border-radius: 20rpx;

				.info-wrap {
					.title {
						margin-bottom: 50rpx;
						@include text-ellipsis;
						font-size: 28rpx;
						font-weight: bolder;
					}

					.answer-count {
						font-size: 20rpx;
					}
				}
			}
		}
	}
</style>
